<template>
  <div class="department">
    <div class="w">
      <el-container>
        <el-aside width="200px">
          <el-tree
            :data="data"
            :props="defaultProps"
            draggable
            @node-drop="handleDrop"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-aside>
        <el-container>
          <el-header class="el-header"> 部门管理</el-header>
          <el-main>
            <div class="btn">
              <a-button class="btn_children" type="primary" icon="plus-circle">
                新增
              </a-button>
              <a-button class="btn_children" type="primary" icon="up">
                上移
              </a-button>
              <a-button class="btn_children" type="primary" icon="down">
                下移
              </a-button>
              <a-button class="btn_children" type="primary" icon="delete">
                删除
              </a-button>
            </div>
            <a-form-model
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              v-bind="layout"
            >
              <a-form-model-item label="上级部门" prop="pass">
                <a-tree-select
                  v-model="value"
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="treeData"
                  placeholder="Please select"
                  tree-default-expand-all
                >
                </a-tree-select>
              </a-form-model-item>
              <a-form-model-item label="部门名称" prop="checkPass">
                <a-input
                  v-model="ruleForm.checkPass"
                  type="text"
                  autocomplete="off"
                />
              </a-form-model-item>
              <a-form-model-item label="显示顺序" prop="check">
                <a-input
                  v-model="ruleForm.check"
                  type="text"
                  autocomplete="off"
                />
              </a-form-model-item>
              <a-form-model-item label="重点学科" prop="age">
                <a-tree-select
                  v-model="values"
                  style="width: 100%"
                  :tree-data="treeDatas"
                  tree-checkable
                  :show-checked-strategy="SHOW_PARENT"
                  search-placeholder="Please select"
                >
                </a-tree-select>
              </a-form-model-item>
              <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="submitForm('ruleForm')">
                  保存
                </a-button>
                <a-button
                  style="margin-left: 10px"
                  @click="resetForm('ruleForm')"
                >
                  重置
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
import { department } from "../../api/department/department";
import { TreeSelect } from "ant-design-vue";
import { saveObject, saveObjects } from "../../api/admin";

const SHOW_PARENT = TreeSelect.SHOW_PARENT;

export default {
  name: "Department",
  data() {
    let checkPending;
    let validatePass = (rule, value, callback) => {
      {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please input the password again"));
      } else {
        callback();
      }
    };
    return {
      values: [],
      treeDatas: [],
      SHOW_PARENT,
      value: "",
      ruid: "",
      ruids: [],
      treeData: [
        {
          title: "部门",
          children: [],
        },
      ],
      ruleForm: {
        pass: "",
        checkPass: "",
        age: "",
      },
      rules: {
        pass: [{ required: true, validator: validatePass, trigger: "change" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "change" },
        ],
        check: [{ validator: validatePass2, trigger: "change" }],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      data: [
        {
          label: "部门",
          children: [],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    value(value) {
      this.ruleForm.pass = value;
      this.ruid = value;
      return this.ruid;
    },
    values(value) {
      this.ruids = value;
      return this.ruids;
    },
  },
  mounted() {
    //获取tree数据
    this.departmentTree();
  },
  methods: {
    
    //获取tree数据
    departmentTree() {
      department({
        type: "department",
        rootnode: {
          RUID: "0",
          exist: "0",
          show: "0",
        },
        deep: -1,
        field: "RUID,name,parentid",
        key: {
          RUID: "ruid",
          name: "name",
          children: "children",
        },
        filter: [],
        order: [
          {
            fieldname: "name",
            type: "D",
          },
        ],
      }).then((res) => {
        let bead = {};
        let treeData = {};
        res.nodes.forEach((item, index) => {
          bead = { label: item.name, parentid: index, ruid: item.ruid };
          treeData = { title: item.name, value: item.ruid, key: index };
          this.treeData[0].children.push(treeData);
          this.data[0].children.push(bead);
        });
      });
      //重点科学
      department({
        type: "column",
        rootnode: {
          RUID: "1ad180a50009a40bce",
          exist: "1",
          show: "0",
        },
        deep: -1,
        field: "RUID,name,parentid",
        key: {
          RUID: "ruid",
          name: "name",
          children: "children",
        },
        filter: [],
        order: [
          {
            fieldname: "name",
            type: "D",
          },
        ],
      }).then((res) => {
        let treeDatas = {};
        let children = [];
        let key = "";
        let keys = "";
        res.nodes.forEach((item, index) => {
          key = item.parentid + "/" + index;
          if (!item.children) {
            return;
          }
          item.children.forEach((item, index) => {
            keys = item.parentid + "/" + index;
            children = [{ title: item.name, value: item.ruid, key: keys }];
          });
          treeDatas = {
            title: item.name,
            value: item.ruid,
            key: key,
            children: children,
          };
          this.treeDatas.push(treeDatas);
        });
      });
    },
    //拖拽完成
       handleDrop(draggingNode, dropNode, dropType, ev) {
         //改变或的数据
        //  console.log( dropNode.parent.data.children);
        // console.log('tree drop: ', dropNode.label, dropType);
      },
    handleNodeClick(datas) {
      if (datas.label == "部门") {
        this.$message.success("根节点不可选", 2.5);
        return;
      } else {
        this.ruleForm.checkPass = datas.label;
        this.ruleForm.check = datas.parentid;
        this.value = "部门";
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //保存
          saveObject({
            type: "department",
            codeflag: "1",
            object: {
              name: this.ruleForm.checkPass,
              RUID: this.ruid,
              parentid: this.ruleForm.check,
              coresubject: this.ruids.toString(),
            },
          }).then((res) => {
            if (res.cxajaxrc == "0") {
              this.$message.success( "保存成功", 2.5);
            } else {
              this.$message.error("保存失败",2.5);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.value = "";
      this.values = [];
    },
  },
};
</script>
<style lang="scss" scoped>
.department {
  .w {
    .btn {
      min-height: 60px;
      text-align: right;
      line-height: 60px;
      .btn_children {
        margin-right: 20px;
      }
    }
  }
}

.el-header {
  background-color: #eee;
  color: #333;
  text-align: left;
  line-height: 60px;
  height: 40px;
}

.el-aside {
  color: #333;
  text-align: center;
}

.el-main {
  background: #fff;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>